<div class="task-track-panel">
  <div class="task-title">
    <span class="iconfont icon-return" ui-sref="menu.tasktrack.list"></span>
    <span ng-bind="vm.taskPlanInfo.projectName"></span>
  </div>
  <div class="task-panel">
    <div class="task-panel-head">
      <div class="task-panel-th row">
        <div class="col-xs-6 task-name">任务名称</div>
        <div class="col-xs-3">任务用时</div>
        <div class="col-xs-3">任务进度</div>
      </div>
      <div class="task-panel-time">
        <div class="task-panel-time-axis" ng-repeat="(date, mins) in vm.taskPlanInfo.timeAxis">
          <div class="time-axis-hour" ng-bind="date | date:'yyyy年MM月dd日 HH时'"></div>
          <div class="time-axis-mins">
            <div class="time-axis-min" ng-repeat="min in mins" ng-bind="min" ng-class="{'current-min':date==vm.currentTime.time&&min==vm.currentTime.min}"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="task-panel-body">
      <div class="task-group-list" ng-repeat="fallback in vm.taskPlanInfo.fallbackList" ng-if="fallback&&(vm.taskPlanInfo.status==4||vm.taskPlanInfo.status==5)">
        <div class="task-group">
          <div class="task-group-th row">
            <div class="col-xs-6 text-ellipsis task-name" title="{{fallback.fallbackName}}">
              <span class="label label-info" ng-bind="fallback.no"></span>
              <span ng-bind="fallback.fallbackName"></span>
            </div>
            <div class="col-xs-3">
              <span ng-if="!fallback.startTime">未开始</span>
              <span ng-if="fallback.startTime&&!fallback.endTime">进行中</span>
              <span ng-if="fallback.endTime" ng-bind="fallback.useTime|timeTransform"></span>
            </div>
            <div class="col-xs-3">
              <span class="iconfont icon-done" ng-if="fallback.endTime"></span>
            </div>
          </div>
          <div class="task-group-process">
            <div class="current-time-col" ng-if="vm.currentTime.offset" ng-style="{'margin-left': vm.currentTime.offset+'px'}"></div>
            <div class="progress" ng-style="fallback.progress.style.outstyle">
              <div class="progress-bar" ng-class="fallback.progress.style.instyle.inTimeStyle.class" ng-style="fallback.progress.style.instyle.inTimeStyle.style"></div>
              <div class="progress-bar" ng-if="fallback.progress.style.instyle.isOvertime" ng-class="fallback.progress.style.instyle.outTimeStyle.class" ng-style="fallback.progress.style.instyle.outTimeStyle.style"></div>
              <span class="iconfont icon-details" ng-style="fallback.progress.style.instyle.iconStyle" ng-click="vm.showTaskDetailsModal(fallback,'fallback')"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="task-group-list" ng-repeat="changeGroup in vm.taskPlanInfo.changeGroupList">
        <div class="task-group">
          <div class="task-group-th row" onclick="$(this).parent().parent().toggleClass('open')">
            <div class="col-xs-6 text-ellipsis task-name" title="{{vm.taskPlanInfo.noEnum[changeGroup.no]}}">
              <span class="label label-info" ng-bind="changeGroup.no"></span>
              <i class="iconfont icon-pull-up"></i>
              <i class="iconfont icon-pull-down"></i>
              <span ng-bind="vm.taskPlanInfo.noEnum[changeGroup.no]"></span>
            </div>
            <div class="col-xs-3">
              <span ng-if="!changeGroup.isStart">未开始</span>
              <span ng-if="changeGroup.isStart" ng-bind="changeGroup.useTime|timeTransform"></span>
            </div>
            <div class="col-xs-3">
              <div class="progress-radial progress-defined" ng-style="changeGroup.progress.style.ringstyle"><b></b></div>
              <span ng-bind="changeGroup.finishCount"></span>/<span ng-bind="changeGroup.list.length"></span>
            </div>
          </div>
          <div class="task-group-process">
            <div class="current-time-col" ng-if="vm.currentTime.offset" ng-style="{'margin-left': vm.currentTime.offset+'px'}"></div>
            <div class="progress" ng-style="changeGroup.progress.style.outstyle">
              <div class="progress-bar" ng-class="changeGroup.progress.class" ng-style="changeGroup.progress.style.instyle"></div>
            </div>
          </div>
        </div>
        <div class="task-list" ng-repeat="change in changeGroup.list">
          <div class="task-list-th row">
            <div class="col-xs-6 text-ellipsis task-name" title="{{change.changeName}}">
              <i class="iconfont icon-pull-down"></i>
              <span ng-bind="change.changeName"></span>
            </div>
            <div class="col-xs-3" class="use-time">
              <span ng-if="change.endTime" ng-bind="change.useTime|timeTransform"></span>
              <span ng-if="change.startTime&&!change.endTime">进行中</span>
              <span ng-if="!change.startTime">未开始</span>
            </div>
            <div class="col-xs-3">
              <span class="iconfont icon-done" ng-if="change.endTime&&change.status==true" ng-class="{'over-time':change.progress.status=='overtime'}"></span>
              <div class="task-exception" ng-if="change.status==false">
                <span class="iconfont icon-error"></span>
                <span>异常</span>
              </div>
            </div>
          </div>
          <div class="task-process">
            <div class="current-time-col" ng-if="vm.currentTime.offset" ng-style="{'margin-left': vm.currentTime.offset+'px'}"></div>
            <div class="progress" ng-style="change.progress.style.outstyle">
              <div class="progress-bar" ng-class="change.progress.style.instyle.inTimeStyle.class" ng-style="change.progress.style.instyle.inTimeStyle.style"></div>
              <div class="progress-bar" ng-if="change.progress.style.instyle.isOvertime" ng-class="change.progress.style.instyle.outTimeStyle.class" ng-style="change.progress.style.instyle.outTimeStyle.style"></div>
              <span class="iconfont icon-details" ng-style="change.progress.style.instyle.iconStyle" ng-click="vm.showTaskDetailsModal(change,'change')"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="taskDetailsModal" class="task-details-modal modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">任务详情</h4>
        </div>
        <div class="modal-body">
          <dl class="dl-horizontal" ng-show="vm.currentTask.taskType==='change'">
            <dt>执行内容</dt>
            <dd ng-bind="vm.currentTask.content"></dd>
            <dt>账号</dt>
            <dd ng-bind="vm.currentTask.account"></dd>
            <dt>权限类型</dt>
            <dd ng-bind="vm.currentTask.permissionType"></dd>
            <dt>IP/URL</dt>
            <dd ng-bind="vm.currentTask.url"></dd>
            <dt>执行人</dt>
            <dd ng-bind="vm.currentTask.executor"></dd>
            <dt>变更资源</dt>
            <dd ng-bind="vm.currentTask.resource"></dd>
            <dt>备注</dt>
            <dd ng-bind="vm.currentTask.remark"></dd>
          </dl>
          <dl class="dl-horizontal" ng-show="vm.currentTask.taskType==='fallback'">
            <dt>执行内容</dt>
            <dd ng-bind="vm.currentTask.content"></dd>
            <dt>执行人</dt>
            <dd ng-bind="vm.currentTask.executor"></dd>
            <dt>备注</dt>
            <dd ng-bind="vm.currentTask.remark"></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</div>